<template>
  <view class="uni-numbox">
    <view
      class="uni-numbox__minus uni-cursor-point"
      @click="_calcValue('minus')"
    >
      <text
        class="uni-numbox--text"
        :class="{ 'uni-numbox--disabled': inputValue <= min }"
      >
        -
      </text>
    </view>
    <!-- <text style="width: 100rpx;text-align: center;">{{inputValue}}</text> -->
    <view class="input">
      <input
        v-model="inputValue"
        :disabled="disabled"
        class="uni-numbox__value"
        type="number"
        maxlength="5"
        @focus="_onFocus"
        @blur="_onBlur"
        @input="_input"
      >
    </view>
    <view
      class="uni-numbox__plus uni-cursor-point"
      @click="_calcValue('plus')"
    >
      <text
        class="uni-numbox--text"
        :class="{ 'uni-numbox--disabled': inputValue >= max }"
      >
        +
      </text>
    </view>
  </view>
</template>
<script>
	/**
	 * NumberBox 数字输入框
	 * @description 带加减按钮的数字输入框
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
	 * @property {Number} value 输入框当前值
	 * @property {Number} min 最小值
	 * @property {Number} max 最大值
	 * @property {Number} step 每次点击改变的间隔大小
	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
	 */

	export default {
		name: "UniNumberBox",
		emits:['change','input','update:modelValue','blur','focus'],
		props: {
			value: {
				type: [Number, String],
				default: 1
			},
			modelValue:{
				type: [Number, String],
				default: 1
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 2000
			},
			step: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				inputValue: 0
			};
		},
		watch: {
			value(val) {
				this.inputValue = +val;
			},
			modelValue(val){
				this.inputValue = +val;
			}
		},
		created() {
			if(this.value === 1){
				this.inputValue = +this.modelValue;
			}
			if(this.modelValue === 1){
				this.inputValue = +this.value;
			}
		},
		methods: {
			_input(e) {
        let number = Math.ceil(Number(e.detail.value))
        if(!number){
          number = 0
        }
        if(number>this.max){
          number = this.max
        }
        this.$nextTick(()=>{
          this.inputValue = number
        })
				this.$emit("change", number);
			},
			_calcValue(type) {
				const scale = this._getDecimalScale();
				let value = this.inputValue * scale;
				let step = this.step * scale;
				if (type === "minus") {
					value -= step;
					if (value < (this.min * scale)) {
						return;
					}
					if (value > (this.max * scale)) {
						value = this.max * scale
					}
				}

				if (type === "plus") {
					value += step;
					if (value > (this.max * scale)) {
						return;
					}
					if (value < (this.min * scale)) {
						value = this.min * scale
					}
				}

				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
				this.$emit("change", +this.inputValue);
				// TODO vue2 兼容
				this.$emit("input", +this.inputValue);
				// TODO vue3 兼容
				this.$emit("update:modelValue", +this.inputValue);
			},
			_getDecimalScale() {

				let scale = 1;
				// 浮点型
				if (~~this.step !== this.step) {
					scale = Math.pow(10, String(this.step).split(".")[1].length);
				}
				return scale;
			},
			_onBlur(event) {
				this.$emit('blur', event)
				let value = event.detail.value;
				// console.log( typeof value);
				// console.log(value);
				if (!value) {
					uni.showToast({
						title: '请输入数字',
						icon: 'none'
					});
					this.inputValue = 0;
					return;
				}
				value = +value;
				if (value > this.max) {
					value = this.max;
				} else if (value < this.min) {
					value = this.min;
				}
				
				// 不允许输入小数点
				// if(!/^\d+$/.test(value)) {
				// 	uni.showToast({
				// 		title: '请输入数字',
				// 		icon: 'none'
				// 	});
				// this.inputValue=1
				// }
				const scale = this._getDecimalScale();
				this.inputValue = value.toFixed(String(scale).length - 1);
				this.$emit("change", +this.inputValue);
				this.$emit("input", +this.inputValue);
			},
			_onFocus(event) {
				this.$emit('focus', event)
			}
		}
	};
</script>
<style lang="less" scoped>
	.input {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 161rpx;
		height: 65rpx;
		border-top: 1rpx solid #c4c4c4;
		border-bottom: 1rpx solid #c4c4c4;
		
	}
	/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none; 
    margin: 0; 
}
/* 火狐 */
input{
    -moz-appearance:textfield;
}

	.uni-numbox__value{
		color: #222222;

		}
	.uni-numbox {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			height: 65rpx;
			position: relative;
			border: 1upx solid #fff;
	
			&:after {
				content: '';
				position: absolute;
				transform-origin: center;
				box-sizing: border-box;
				pointer-events: none;
				top: -50%; 
				left: -50%;
				right: -50%;
				bottom: -50%;
				border-radius: 12rpx;
				transform: scale(.5);
	
			}
	
			&__minus,
			&__plus {
				background-color: #FFFFFF;
				width: 91rpx;
				font-size: 40rpx;
				height: 65rpx;
				// padding: 0 0 6rpx 2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333;
				position: relative;
				border: 1rpx solid #c4c4c4;
			}
	
			&__value {
				position: relative;
				background-color: #fff;
				// width: 80upx;
				// height: 74rpx;
				line-height: 65rpx;
				text-align: center;
				font-size: 30rpx;
	
				&:after {
					content: '';
					position: absolute;
					transform-origin: center;
					box-sizing: border-box;
					pointer-events: none;
					top: -50%;
					left: -50%;
					right: -50%;
					bottom: -50%;
					border-style: solid;
					border-color: #fff;
					border-left-width: 1upx;
					border-right-width: 1upx;
					border-top-width: 0;
					border-bottom-width: 0;
					transform: scale(.5);
				}
			}
	
			&--disabled {
				color: #DADADA;
			}
		}

</style>
